/**
 * polygonwidget模块
 */

var FG;
if (!FG)
    FG = {};

FG.POLYGONWIDGET_TEMPLATE = _.template(
    '<div class="toolwidget">' +
        //'<div class="name" >点</div>' +
        //'<div class="lonlat">123.45123°E 40.00234°N</div>' +
        '<input class="name_edit" type="text" />' +
        '<input class="lonlat_edit" type="text" />' +
        '<div class="sample_label inactive">样品</div>' +
        '<div class="button delete_this layer"><i class="icon-remove-sign "></i></div>' +
        '<div class="button camera layer"><i class="icon-camera"></i></div>' +
        '<div class="button_row">' +
            '<div class="button buy inactive"><i class="icon-shopping-cart "></i></div>' +
            '<div class="button ds"><i class="icon-list-alt "></i></div>' +
            '<div class="button download"><i class="icon-download-alt "></i></div>' +
            '<div class="button edit"><i class="icon-edit "></i></div>' +
                //'<div class="button min"><i class="icon "></i></div>' +
            '<div class="button snapshots"><i class="icon-expand"></i>/<i class="icon-trash"></i></div>' +
            '<div class="photo_port"></div>' +
        '</div>' +
        //'<div class="button snapshots"><i class="icon-expand "></i></div>' +
        '<div class="ds_box toolbox">' +
            '<select class="dataset"></select>' +
            '<ul class="subset">' +
            '</ul>' +
        '</div>' +
        '<div class="buy_box toolbox"></div>' +
        '<div class="edit_box toolbox"></div>' +
        '<div class="download_box toolbox"></div>' +
        '<div class="snapshot_box toolbox"></div>' +
        '<div class="coorder_box">' +
            //'<div class="fg_label vertical_text coord_label level_coord_label">高度层</div>' +
            '<div class="coord_box level_coord_box"></div>' +
            //'<div class="fg_label coord_label version_coord_label">版本</div>' +
            '<div class="coord_box version_coord_box"></div>' +
            //'<div class="fg_label coord_label time_coord_label">时间</div>' +
            '<div class="coord_box time_coord_box"></div>' +
        '</div>' +
        '<div class="colorbar_box">' +
            '<div class="button colorbar_fix"><i class="icon-anchor"></i></div>' +
            '<div class="button colorbar_fit"><i class="icon-resize-vertical"></i></div>' +
            '<div class="colorbar_svg"></div>' +
            '<div class="colorbar_units"></div>' +
        '</div>' +
        '<div class="alpha_box">' +
            '<div class="button alpha_button alpha_toggle1">透明度</div>' +
            '<div class="button alpha_button alpha_toggle2">透明度</div>' +
            //'<div class="button alpha_button alpha_toggle3">α: 20%</div>' +
        '</div>' +
        //'<div class="snapshot_box toolbox"></div>' +
    '</div>' //+
);

FG.PolygonWidget = FG.RectWidget.extend({
    options: {
        minWidth: 20,
        maxWidth: 300,
        // maxHeight: null,
        autoPan: false,
        closeButton: false,
        offset: [3, 2],
        //autoPanPadding: [45, 10],
        autoPanPaddingTopLeft: [300, 10],
        autoPanPaddingBottomRight: [10, 10],
        keepInView: true,
        zoomAnimation: true,
        className: '',
        widgetClassName: 'polygonwidget',
        widgetTemplate: FG.POLYGONWIDGET_TEMPLATE,
        widgetPrefix: 'leaflet-polygonwidget',
        widgetType: 'polygon'
    },

    renderModel: function(model) {
        var this_ = this;
        this._renderModelBasic(model);
        this._renderTools();
        this.$figure = this._source.$image;
        this.$name_edit.val(model.get('name'));
        var info  = model.get('info');
        if (!!info && _.has(info, 'lat1') && _.has(info, 'lon1')
                   && _.has(info, 'lat2') &&_.has(info, 'lon2')) {
            var llstr = info.lat1.toFixed(5) + '~' + info.lat2.toFixed(5) + '°N '+
                        info.lon1.toFixed(5) + '~' + info.lon2.toFixed(5) + '°E' ;
            this.$lonlat_edit.val(llstr);
        }

        this.coorderView = new FG.CoorderView({
            el: this.$content.find('.coorder_box')
        });

        this.cmap = FG.getColormap(FG.getDefaultCmap());
        this.$colorbar = this.$content.find('.colorbar_box .colorbar_svg');
        var myScale = d3.scale.linear()
                        .range(this.cmap.get('colors'))
                        .domain(DX.linspace(0, 12, this.cmap.get('color_number')));
        this.$colorbarUnits = this.$content.find('.colorbar_box .colorbar_units');
        this.colorbar = Colorbar()
            .thickness(10).barlength(109)
            .margin({top:5, bottom:25, left:0, right:35})
            .origin([0,0])
            //.scale(myScale)
            .orient("vertical");

        this.colorbarObject = d3.select(this.$colorbar[0]);
                                //.call(this.colorbar);

        var alphaToggles = {
            alpha1: this.$content.find('.alpha_box .alpha_button.alpha_toggle1'),
            alpha2: this.$content.find('.alpha_box .alpha_button.alpha_toggle2')
            //alpha3: this.$content.find('.alpha_box .alpha_button.alpha_toggle3'),
        };
        var alphaActions = {
            alpha1: function() { this_._source.setOpacity(1.0)},
            alpha2: function() { this_._source.setOpacity(0.6)}
            //alpha3: function() { this_._source.setOpacity(0.3)},
        };

        this.alphaToggler = new DX.Toggler(alphaToggles, {"default": 'alpha1', actions: alphaActions});
        this.$content.find('.alpha_box .alpha_button')
            .unbind('click').
            click(function() {
                this_.alphaToggler.toggle();
            });

        var vrangeToggles = {
            fix: this.$content.find('.colorbar_box .colorbar_fix'),
            fit: this.$content.find('.colorbar_box .colorbar_fit')
        };
        this.vrangeToggler = new DX.Toggler(vrangeToggles, {"default": "fix"});
        _.each(vrangeToggles, function(button, name) {
            button.unbind('click').click(function() {
                this_.vrangeToggler.toggle(name);
                this_.switchViewport({type: "refresh"})
            })
        });

        this._renderDSV();



        this.setContent(this.$content[0]);
        this._switchDefaultViewport();
        return this;
    },

    // 切换工具框

    plotFigure: function(variable, parameters, target, callback) {
        var dataBundle = variable.getDataBundle();
        var coordsUri = variable.coorder.getReplacedUris().join('/');
        var fullUri = [variable.uri, coordsUri].join('/');
        this._source.plotData(dataBundle, {callback: callback, uri: fullUri, widget: this, vrange: this.vrangeToggler.value()});
    }

});

FG.getPolygonWidget = function(opts, widgetOpts, source) {
    this.widgetOpts = _.extend({}, widgetOpts);
    var widget = new FG.PolygonWidget(this.widgetOpts, source);
    return widget;
};


